<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import MicroServiceForm from './org-micro-service-form.vue'

const MicroServiceFormRef = ref();

const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'save-success'): void//新增保存 修改保存 成功回调
}>()

const props = defineProps({
    //是否显示
    visible: {
        type: Boolean,
        default: false
    },
    microServiceId: {
        type: String,
        default: ''
    },
})

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})

const MicroServiceDialogState = reactive({
    handleClose: () => {
        visibleModelValue.value = false;
    },
    //触发表单保存
    onOkButtonClick: () => {
        MicroServiceFormRef.value.save();
    },
    //表单保存成功事件
    onSaveSuccess: () => {
        emit("save-success")
        visibleModelValue.value = false
    }
})

</script>

<template>
    <div class="jxtech-dialog-form">
        <el-dialog
            v-model="visibleModelValue"
            title="微服务管理"
            width="60%"
            destroy-on-close
            :before-close="MicroServiceDialogState.handleClose"
        >
            <micro-service-form ref="MicroServiceFormRef" :micro-service-id="microServiceId" @add-success="MicroServiceDialogState.onSaveSuccess"/>
            <template #footer>
                <jxtech-cancel-button @click="MicroServiceDialogState.handleClose"></jxtech-cancel-button>
                <jxtech-ok-button @click="MicroServiceDialogState.onOkButtonClick"></jxtech-ok-button>
            </template>
        </el-dialog>
    </div>
</template>